<template>
	<view class="content">
		<view style="background-color: #FFF;margin-top: 20rpx;">
			<u-tabs :list="dataList" :current="current" keyName='name' @click="tabClick"
				lineColor="#DD4949" :activeStyle="{color: '#DD4949'}" :scrollable='dataList && dataList.length>4'></u-tabs>
		</view>
		<view style="display: flex;flex-direction: column;">
			<view v-for="(item, index2) in itemList" :key='index2'>
				<shopCell :row='item' @click="operateAction('goDetail', item)" @callAction="operateAction('call', item)"></shopCell>
			</view>
		</view>
	</view>
</template>

<script>
	import itemListComponent from '@/components/itemListComponent/index.vue'
	import { common } from "@/api/common.js"
		import shopCell from "@/components/shopCell/shopCell.vue"
	export default{
		components: {
			itemListComponent,
			shopCell
		},
		props:{
		},
		data() {
			return {
				page: 1,
				size: 16,
				totalPage: 0,
				showEmpty: false,
				isLastPage: false,
				current: 0,
				dataList: [{id: 1, name: '优选商家'}, {id: 2, name: '距离最近'}, {id: 3, name: '销量最高'}, {id: 4, name: '最新入驻'}],
				itemList: []
			}
		},
		created() {
			this.tabsChange(this.current)
		},
		methods:{
			tabClick(item){
				console.log('当前活动', item)
				this.tabsChange(item.index)
			},
			operateAction(scene, val) {
				switch (scene) {
					case 'goDetail':
						this.$Router.push({
							name: 'shopDetail',
							params: {
								shopId: val.id
							}
						})
						break;
					case 'call':
						uni.makePhoneCall({
							phoneNumber: val.phone, // 电话号码
							success: function() {
								console.log('拨打电话成功');
							},
							fail: function() {
								console.log('拨打电话失败');
							}
						})
						break;
					default:
						break;
				}
			},
			tabsChange(index){
				this.current = index;
				this.page = 1
				this.getItemList()
			},
			itemHandle(item) {
				this.$Router.push({
					name: 'itemDetail',
					params: {
						obj_id: item.id
					}
				})
			},
			getItemList(){
				common.operateActionGet('/merchant/shopForC/', {
					page: this.page,
					size: this.size,
					scene: this.dataList[this.current].id,
				}).then(res => {
					uni.stopPullDownRefresh();
					if(res.data.code == 10000){
						if (this.page == 1) {
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length < 1
						if (res.data.data.next) {
							this.page += 1
							this.isLastPage = false
						} else {
							this.isLastPage = true
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
</style>
